<template>
  <div class="layout">
    <nav>
      <router-link to="/">vue主应用首页</router-link>
      <router-link to="/about">vue主应用关于页</router-link>
      <!-- 子应用vue3对应的路由 -->
      <router-link to="/vue3-sub/hello">vue3子应用首页</router-link>
      <router-link to="/vue3-sub/testa">vue3子应用A页面</router-link>
      <router-link to="/vue3-sub/testb">vue3子应用B页面</router-link>
    </nav>
    <main>
      <router-view></router-view>
    </main>
  </div>
</template>

<script setup lang="ts">
</script>

<style scoped>
.layout {
  display: flex;
  width: 100%;
  height: 100%;
}
nav {
  width: 230px;
}
nav a {
  padding: 15px 10px;
  display: block;
}
nav a.router-link-active {
  color: rgb(241, 107, 95);
  background: rgba(0, 0, 0, 0.05);
}
main {
  flex: 1;
}
</style>